<template>
  <!--  header  -->
  <div  class="nav-container  page-component">
      <!--左侧导航  #start  -->
      <div  class="nav  left-nav">
          <div  class="nav-item  ">
              <span  class="v-link  clickable  dark"  onclick="javascript:window.location='/user'">实名认证  </span>
          </div>
          <div  class="nav-item  selected">
              <span  class="v-link  selected  dark"  onclick="javascript:window.location='/order'">  挂号订单  </span>
          </div>
          <div  class="nav-item  ">
              <span  class="v-link  clickable  dark"  onclick="javascript:window.location='/patient'">  就诊人管理  </span>
          </div>
          <div  class="nav-item  ">
              <span  class="v-link  clickable  dark">  修改账号信息  </span>
          </div>
          <div  class="nav-item  ">
              <span  class="v-link  clickable  dark">  意见反馈  </span>
          </div>
      </div>
      <!--  左侧导航  #end  -->
      <!--  右侧内容  #start  -->
      <div  class="page-container">
          <div  class="order-detail">
              <div  class="title">  挂号详情</div>
              <div  class="status-bar">
                  <div  class="left-wrapper">
                      <div  class="status-wrapper  BOOKING_SUCCESS">
                          <span  class="iconfont"></span>  {{  orderInfo.param.orderStatusString  }}
                      </div>
                  </div>
                  <div  class="right-wrapper">
                      <img  src="//img.114yygh.com/static/web/code_order_detail.png"  class="code-img">
                      <div  class="content-wrapper">
                          <div>  微信<span  class="iconfont"></span>关注“预约挂号”</div>
                          <div  class="watch-wrapper">  快速挂号，轻松就医</div>
                      </div>
                  </div>
              </div>
              <div  class="info-wrapper">
                  <div  class="title-wrapper">
                      <div  class="block"></div>
                      <div>挂号信息</div>
                  </div>
                  <div  class="info-form">
                      <el-form  ref="form"  :model="form">
                          <el-form-item  label="就诊人信息：">
                              <div  class="content"><span>{{  orderInfo.patientName  }}</span></div>
                          </el-form-item>
                          <el-form-item  label="就诊日期：">
                              <div  class="content"><span>{{  orderInfo.reserveDate  }}  {{  orderInfo.reserveTime  ==  0  ?  '上午'  :  '下午'  }}</span></div>
                          </el-form-item>
                          <el-form-item  label="就诊医院：">
                              <div  class="content"><span>{{  orderInfo.hosname  }}  </span></div>
                          </el-form-item>
                          <el-form-item  label="就诊科室：">
                              <div  class="content"><span>{{  orderInfo.depname  }}  </span></div>
                          </el-form-item>
                          <el-form-item  label="医生职称：">
                              <div  class="content"><span>{{  orderInfo.title  }}  </span></div>
                          </el-form-item>
                          <el-form-item  label="医事服务费：">
                              <div  class="content">
                                  <div  class="fee">{{  orderInfo.amount  }}元
                                  </div>
                              </div>
                          </el-form-item>
                          <el-form-item  label="挂号单号：">
                              <div  class="content"><span>{{  orderInfo.outTradeNo  }}  </span></div>
                          </el-form-item>
                          <el-form-item  label="挂号时间：">
                              <div  class="content"><span>{{  orderInfo.createTime  }}</span></div>
                          </el-form-item>
                      </el-form>
                  </div>
              </div>
              <div  class="rule-wrapper  mt40">
                  <div  class="rule-title">  注意事项</div>
                  <div>1、请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；<br>
                      <span  style="color:red">2、【取号】就诊当天需在{{  orderInfo.fetchTime  }}在医院取号，未取号视为爽约，该号不退不换；</span><br>
                      3、【退号】在{{  orderInfo.quitTime  }}前可在线退号  ，逾期将不可办理退号退费；<br>
                      4、预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；<br>
                      5、请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。
                  </div>
              </div>
              <div  class="bottom-wrapper  mt60"  v-if="orderInfo.orderStatus  ==  0  ||  orderInfo.orderStatus  ==  1">
                  <div  class="button-wrapper">
                      <div  class="v-button  white"  @click="cancelOrder()">取消预约</div>
                  </div>
                  <div  class="button-wrapper  ml20"  v-if="orderInfo.orderStatus  ==  0">
                      <div  class="v-button"  @click="pay()">支付</div>
                  </div>
              </div>
          </div>
      </div><!--  右侧内容  #end  -->
      <!--  微信支付弹出框  -->
      <el-dialog  :visible.sync="dialogPayVisible"  style="text-align:  left"  :append-to-body="true"  width="500px"  @close="closeDialog">
          <div  class="container">
              <div  class="operate-view"  style="height:  350px;">
                  <div  class="wrapper  wechat">
                      <div>
                          <qriously  :value="payObj.codeUrl"  :size="220"/>
                          <div  style="text-align:  center;line-height:  25px;margin-bottom:  40px;">
                              请使用微信扫一扫<br/>
                              扫描二维码支付
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </el-dialog>
  </div><!--  footer  -->
</template>
<script>
import  '~/assets/css/hospital_personal.css'
import  '~/assets/css/hospital.css'
import  orderInfoApi  from  '@/api/order/orderInfo'
import  weixinApi  from  '@/api/order/weixin'
export  default  {
  data()  {
      return  {
          orderId:  null,
          orderInfo:  {
              param:  {}
          },
          dialogPayVisible:  false,
          payObj:  {},
          timer:  null    //  定时器名称
      }
  },
  created()  {
      this.orderId  =  this.$route.query.orderId
      this.init()
  },
  methods:  {
          cancelOrder()  {
          this.$confirm('确定取消预约吗?',  '提示',  {
              confirmButtonText:  '确定',
              cancelButtonText:  '取消',
              type:  'warning'
          }).then(()  =>  {  //  promise
              //  点击确定，远程调用
              return  weixinApi.cancelOrder(this.orderId)
          }).then((response)  =>  {
              this.$message.success('取消成功')
              this.init()
          }).catch(()  =>  {
              this.$message.info('已取消取消预约')
          })
      },
      init()  {
          orderInfoApi.getOrders(this.orderId).then(response  =>  {
              console.log(response.data);
              this.orderInfo  =  response.data
          })
      },
      pay()  {
          this.dialogPayVisible  =  true
          weixinApi.createNative(this.orderId).then(response  =>  {
              this.payObj  =  response.data
              if(this.payObj.codeUrl  ==  '')  {
                  this.dialogPayVisible  =  false
                  this.$message.error("支付错误")
              }  else  {
                  this.timer  =  setInterval(()  =>  {
                      this.queryPayStatus(this.orderId)
                  },  3000);
              }
          })
      },
      queryPayStatus(orderId)  {
          weixinApi.queryPayStatus(orderId).then(response  =>  {
              if  (response.message  ==  '支付中')  {
                  console.log("支付中...")
                  return
              }
              alert("即将跳转...")
              clearInterval(this.timer);
              window.location.reload()
          })
      },
      closeDialog()  {
          if(this.timer)  {
              clearInterval(this.timer);
          }
      }
  }
}
</script>
<style>
  .info-wrapper  {
      padding-left:  0;
      padding-top:  0;
  }
  .content-wrapper  {
      color:  #333;
      font-size:  14px;
      padding-bottom:  0;
  }
  .bottom-wrapper  {
      width:  100%;
  }
  .button-wrapper  {
      margin:  0;
  }
  .el-form-item  {
      margin-bottom:  5px;
  }
  .bottom-wrapper  .button-wrapper  {
      margin-top:  0;
  }
</style>